<template>
	<!-- 买车 -->
	<view class="content">
		<!-- <i-nav></i-nav> -->
		<!-- 主要内容 -->
		<view class="main">
			<view class="main-header">
				<!-- 菜单  -->
				<view class="menu">
					<view class="menu-list flex flex-jc-sa">
						<view class="menu-item" v-for="(item,i) in typeMenu" :key="i" @click.stop="goLink(item.path)">
							<!-- <image class="item-img" :src="item.imgSrc" mode="widthFix"></image> -->
							<i-icon :icon="item.imgSrc" type="multiple" size="90rpx"></i-icon>
							<view class="item-text">{{item.text}}</view>
						</view>
					</view>
					<view class="menu-list flex flex-jc-sa">
						<view class="menu-item" v-for="(item, i) in brandAllList" :key="i" @click.stop="onBrand(item)">
							<image class="item-img"
								:src="'https://files.yzsheng.com/goodimg/brandimg/' + item.Bid + '.png'"
								mode="aspectFit"></image>
							<view class="item-text" style="color: #666;">{{item.Brand}}</view>
						</view>
					</view>
					<view class="menu-list flex flex-jc-sb" style="flex-wrap: wrap;">
						<view class="menu-item" v-for="(item, index) in priceMenu" :key="index"
							@click.stop="goCondition(item)">
							<view class="price-text">{{item.price}}</view>
						</view>
						<view class="menu-item" @click="goPage('/pages_buy_index/condition/condition')">
							<view class="price-text">查看更多</view>
						</view>
					</view>
				</view>

				<!--  快捷入口  -->
				<view class="entrance">
					<view class="center flex flex-jc-sb">
						<view @click="goPages('/price_Comparison/comparison_home/comparison_home')">
							<image src="https://files.yzsheng.com/client/index/linkImages/xunbijiazaigou2.png"></image>
						</view>
						<view @click="goPages('/pages_order/carPurchaseCalculation/carPurchaseCalculation')">
							<image src="https://files.yzsheng.com/client/index/linkImages/gouchecesuan2.png"></image>
						</view>
						<view @click="goPages('/pages_commodity/myCarList/myCarList')">
							<image src="https://files.yzsheng.com/client/index/linkImages/wodechedan2.png"></image>
						</view>
					</view>
				</view>


				<!-- 轮播banner -->
				<view class="banner">
					<swiper class="img-swipe" :autoplay="true" :circular="true" :indicator-dots="false" :interval="3000"
						:current="bannerCurrent" @change="swiperChange">
						<swiper-item v-for="(item, index) in banners" :key="index" @click="goBannber(item.path)">
							<image :src="item.img"></image>
						</swiper-item>
					</swiper>
				</view>
			</view>

			<!-- 列表内容 -->
			<view class="list-box flex flex-dir-c">
				<!-- v-if="index===1" -->
				<view @touchmove.stop>
					<!-- #ifdef MP-WEIXIN -->
					<u-sticky v-if="index===1" :offset-top="stickyHeight" :h5-nav-height="isHeight" bg-color="none" @fixed="fixed"
						@unfixed="tabTop = false" :enable="enable">
					<!-- #endif -->
					
					<!-- #ifndef MP-WEIXIN -->
					<u-sticky :offset-top="stickyHeight" :h5-nav-height="isHeight" bg-color="none" @fixed="fixed"
						@unfixed="tabTop = false" :enable="enable">
						<!-- #endif -->
						
						<u-tabs :list="swiperList" :active-item-style="activeItem" font-size="28" active-color="#333333"
							inactiveColor='#666666' :is-scroll="false" :current="swiperCurrent" @change="change">
						</u-tabs>
						<!-- 下拉筛选All -->
						<view class="dropdownAll">

							<!-- 推荐筛选下拉菜单 -->
							<view v-show="swiperCurrent===0">
								<u-dropdown :ref='refRecommend[0]' title-size='26rpx' active-color='#FBB000'
									@open='open' @close="close" :class="[isOpen ? 'down-open':'down-close']">
									<u-dropdown-item :title="sortTitle[0]">
										<view class="recommend">
											<view v-for="(item,index) in tjSort" :key='item.id' class="item-list"
												@click="recommend(item.id,item)">
												<view :class="{'active': recommendValue[0] === item.id}">{{item.name}}
												</view>
											</view>
										</view>
									</u-dropdown-item>
									<u-dropdown-item title="品牌">
										<view style="background-color: #FFFFFF;">
											<brand-list @close="closePopupSection" :brandTotal='brandTotal' :Brandlist='Brandlist' @change="brandListChange"
												:height="880+'rpx'"></brand-list>
										</view>
									</u-dropdown-item>
									<u-dropdown-item title="筛选"></u-dropdown-item>
								</u-dropdown>
							</view>

							<!-- 一成首付下拉筛选 -->
							<view v-show="swiperCurrent===1">
								<u-dropdown :ref='refRecommend[1]' title-size='26rpx' active-color='#FBB000'
									@open='open' @close="close" :class="isOpen ? 'down-open':'down-close'">
									<u-dropdown-item :title="sortTitle[1]">
										<view class="dropdown2">
											<view v-for="(item,index) in paymentsSort" :key='item.id'
												@click="recommend(item.id,item)" class='sortList'>
												<view :class="{'active': recommendValue[1] === item.id}">{{item.name}}
												</view>
											</view>
										</view>
									</u-dropdown-item>
									<u-dropdown-item title="品牌">
										<view style="background-color: #FFFFFF;">
											<brand-list @close="closePayment" @change="brandListChange" :brandTotal='brandTotal' :Brandlist='Brandlist'
												:height="880+'rpx'">
											</brand-list>
										</view>
									</u-dropdown-item>

									<!-- 首付 -->
									<u-dropdown-item :title="paymentTitle[1]">
										<view class="dropdown2">
											<view class="list">
												<view v-for="(item,index) in paymentsPrice" :key='item.id'
													class="flex flex-jc-c" style="width: 20%;line-height: 70rpx;"
													@click="paymentsSrot(item)">
													<view :class="{'active': paymentsPriceValue[1] === item.id}">
														{{item.name}}
													</view>
												</view>
											</view>
											<view class="bottom">有<text>{{carNmber}}</text>款车符合条件</view>
										</view>

									</u-dropdown-item>

									<!-- 月供 -->
									<u-dropdown-item :title="mounthlyTitle[1]">
										<view class="dropdown2">
											<view class="list2">
												<view v-for="(item,index) in mounthlyPrice" :key='item.id'
													class="flex flex-jc-c" @click="mounthlySort(item)"
													style="width: 20%;line-height: 70rpx;">
													<view :class="{'active': mounthlyPriceValue[1] === item.id}">
														{{item.name}}
													</view>
												</view>
											</view>
											<view class="bottom">有<text>{{carNmber}}</text>款车符合条件</view>
										</view>
									</u-dropdown-item>
								</u-dropdown>
							</view>

							<!-- 以租代售下拉筛选 -->
							<view v-show="swiperCurrent===2">
								<u-dropdown :ref='refRecommend[2]' title-size='26rpx' active-color='#FBB000'
									@open='open' @close="close" :class="isOpen ? 'down-open':'down-close'">
									<u-dropdown-item :title="sortTitle[2]">
										<view class="recommend">
											<view v-for="(item,index) in paymentsSort" :key='item.id' class="item-list"
												@click="recommend(item.id,item)">
												<view :class="{'active': recommendValue[2] === item.id}">{{item.name}}
												</view>
											</view>
										</view>
									</u-dropdown-item>
									<u-dropdown-item title="品牌">
										<view style="background-color: #FFFFFF;">
											<brand-list @close="closeComparison" @change="brandListChange" :brandTotal='brandTotal' :Brandlist='Brandlist'
												:height="880+'rpx'"></brand-list>
										</view>
									</u-dropdown-item>
									<u-dropdown-item :title="paymentTitle[2]">
										<view class="dropdown2">
											<view class="list">
												<view v-for="(item,index) in paymentsPrice" :key='item.id'
													class="flex flex-jc-c" style="width: 20%;line-height: 70rpx;"
													@click="paymentsSrot(item)">
													<view :class="{'active': paymentsPriceValue[2] === item.id}">
														{{item.name}}
													</view>
												</view>
											</view>
											<view class="bottom">有<text>{{carNmber}}</text>款车符合条件</view>
										</view>
									</u-dropdown-item>
									<u-dropdown-item :title="mounthlyTitle[2]">
										<view class="dropdown2">
											<view class="list2">
												<view v-for="(item,index) in mounthlyPrice" :key='item.id'
													class="flex flex-jc-c" style="width: 20%;line-height: 70rpx;"
													@click="mounthlySort(item)">
													<view :class="{'active': mounthlyPriceValue[2] === item.id}">
														{{item.name}}
													</view>
												</view>
											</view>
											<view class="bottom">有<text>{{carNmber}}</text>款车符合条件</view>
										</view>
									</u-dropdown-item>
								</u-dropdown>
							</view>

							<!-- 巨能降下拉筛选 -->
							<view v-show="swiperCurrent===3">
								<u-dropdown :ref='refRecommend[3]' title-size='26rpx' active-color='#FBB000'
									@open='open' @close="close" :class="isOpen ? 'down-open':'down-close'">
									<u-dropdown-item :title="sortTitle[3]">
										<view class="recommend">
											<view v-for="(item,index) in downList" :key='item.id' class="item-list"
												@click="recommend(item.id,item)">
												<view :class="{'active': recommendValue[3] === item.id}">{{item.name}}
												</view>
											</view>
										</view>
									</u-dropdown-item>
									<u-dropdown-item title="品牌">
										<view style="background-color: #FFFFFF;">
											<brand-list @close="closeBigDrop" @change="brandListChange" :brandTotal='brandTotal' :Brandlist='Brandlist'
												:height="880+'rpx'">
											</brand-list>
										</view>
									</u-dropdown-item>
								</u-dropdown>
							</view>
						</view>
						<view>
							<!-- 推荐 -->
							<view v-show="swiperCurrent===0">
								<view class="item" style="background-color: #fff;margin-top: 10rpx;"
									v-show="buyTypeId!==0 || carTypeId!==0 || brandId[0]!=='' || rangeValues3[0]!==0||newMaxValue!==0">
									<!-- 重置 -->
									<view class="reset">
										<scroll-view scroll-x class="scroll">
											<view class="reset-history flex flex-ai-c">
												<view class="reset-name flex flex-jc-c"
													v-show="rangeValues3[0]!==0||newMaxValue!==0">
													<view>
														{{rangeValues3[0]}}-{{newMaxValue===0?70:newMaxValue}}万
													</view>
													<view @click="delrangeValues">
														<i-icon icon="iconguanbi" size="26rpx"></i-icon>
													</view>
												</view>
												<!-- 购车类型无图 -->
												<view class="reset-name flex flex-jc-c" v-show='buyTypeId!==0'>
													<view>{{buyTypeId | buyType}}</view>
													<view @click="delType">
														<i-icon icon="iconguanbi" size="26rpx"></i-icon>
													</view>
												</view>
												<!-- 购车类型图 -->
												<view class="reset-name flex flex-jc-c" v-show='carTypeId!==0'>
													<view>{{carTypeId | carBodyModel}}</view>
													<view @click="delModel">
														<i-icon icon="iconguanbi" size="26rpx"></i-icon>
													</view>
												</view>
												<view class="reset-name flex flex-jc-c" v-show="brandId[0]!=='' ">
													<view>{{brandNmae[0]}}</view>
													<view @click="delBrand">
														<i-icon icon="iconguanbi" size="26rpx"></i-icon>
													</view>
												</view>
											</view>
										</scroll-view>
										<view class="reset-right flex flex-ai-c" @click="reset">
											<view style="margin-right: 10rpx;">
												<i-icon icon="iconzhongzhi" size="27rpx"></i-icon>
											</view>
											<view>重置</view>
										</view>
									</view>
								</view>
							</view>

							<!-- 一成首付 -->
							<view v-show="swiperCurrent===1">
								<view class="item" style="background-color: #fff;margin-top: 10rpx;"
									v-show="paymentsPriceValue[1] !== -1 || brandId[1] !=='' || mounthlyPriceValue[1]!==-1">
									<!-- 重置 -->
									<view class="reset">
										<scroll-view scroll-x='true' class="scroll ">
											<view class="reset-history flex flex-ai-c">
												<!-- 品牌 -->
												<view class="reset-name flex flex-jc-c" v-show="brandId[1]!=='' ">
													<view>{{brandNmae[1]}}</view>
													<view @click="delBrand">
														<i-icon icon="iconguanbi" size="26rpx"></i-icon>
													</view>
												</view>

												<view class="reset-name flex flex-jc-c"
													v-show="paymentsPriceValue[1]!==-1">
													<view>{{paymentTitle[1]}}</view>
													<view @click="delPanment">
														<i-icon icon="iconguanbi" size="26rpx"></i-icon>
													</view>
												</view>
												<!-- 月供 -->
												<view class="reset-name flex flex-jc-c"
													v-show="mounthlyPriceValue[1]!==-1">
													<view>{{mounthlyTitle[1]}}</view>
													<view @click="delMouth">
														<i-icon icon="iconguanbi" size="26rpx"></i-icon>
													</view>
												</view>
											</view>
										</scroll-view>
										<view class="reset-right flex flex-ai-c" @click="resetPament">
											<view style="margin-right: 10rpx;">
												<i-icon icon="iconzhongzhi" size="27rpx"></i-icon>
											</view>
											<view>重置</view>
										</view>
									</view>
								</view>
							</view>

							<!-- 以租代售 -->
							<view v-show="swiperCurrent===2">
								<view class="item" style="background-color: #fff;margin-top: 10rpx;"
									v-show="paymentsPriceValue[2] !== -1 || brandId[2] !=='' || mounthlyPriceValue[2]!==-1">
									<!-- 重置 -->
									<view class="reset">
										<scroll-view scroll-x='true' class="scroll ">
											<view class="reset-history flex flex-ai-c">
												<!-- 品牌 -->
												<view class="reset-name flex flex-jc-c" v-show="brandId[2]!=='' ">
													<view>{{brandNmae[2]}}</view>
													<view @click="delBrand">
														<i-icon icon="iconguanbi" size="26rpx"></i-icon>
													</view>
												</view>

												<view class="reset-name flex flex-jc-c"
													v-show="paymentsPriceValue[2]!==-1">
													<view>{{paymentTitle[2]}}</view>
													<view @click="delPanment">
														<i-icon icon="iconguanbi" size="26rpx"></i-icon>
													</view>
												</view>
												<!-- 月供 -->
												<view class="reset-name flex flex-jc-c"
													v-show="mounthlyPriceValue[2]!==-1">
													<view>{{mounthlyTitle[2]}}</view>
													<view @click="delMouth">
														<i-icon icon="iconguanbi" size="26rpx"></i-icon>
													</view>
												</view>
											</view>
										</scroll-view>
										<view class="reset-right flex flex-ai-c" @click="resetPament">
											<view style="margin-right: 10rpx;">
												<i-icon icon="iconzhongzhi" size="27rpx"></i-icon>
											</view>
											<view>重置</view>
										</view>
									</view>
								</view>
							</view>

							<view v-show="swiperCurrent===3">
								<view class="item" style="background-color: #fff;margin-top: 10rpx;"
									v-show="brandId[3] !==''">
									<!-- 重置 -->
									<view class="reset">
										<scroll-view scroll-x='true' class="scroll ">
											<view class="reset-history flex flex-ai-c">
												<!-- 品牌 -->
												<view class="reset-name flex flex-jc-c" v-show="brandId[3]!=='' ">
													<view>{{brandNmae[3]}}</view>
													<view @click="delBrand">
														<i-icon icon="iconguanbi" size="26rpx"></i-icon>
													</view>
												</view>
											</view>
										</scroll-view>
										<view class="reset-right flex flex-ai-c" @click="resetPament">
											<view style="margin-right: 10rpx;">
												<i-icon icon="iconzhongzhi" size="27rpx"></i-icon>
											</view>
											<view>重置</view>
										</view>
									</view>
								</view>
							</view>

						</view>

					</u-sticky>
				</view>
				<!-- swiper -->
				<swiper :current="swiperCurrent" @change="listSwitch" class="swiper-item" :duration="300">

					<swiper-item class="swiper" v-for="(item,index) in 4" :key='index' >
						<scroll-view :scroll-y="tabTop" class="item" @scrolltolower='scrolltolower' show-scrollbar>
							<!--  推荐车型  -->
							<view>
								<car :carlist='carlist[index]'></car>
							</view>
							<u-loadmore :status="loadStatus[index]" @loadmore="clickLoadMore" v-show="!defaultImg"
								margin-top="50" />
							<defaultImg :show='defaultImg'></defaultImg>

						</scroll-view>
					</swiper-item>

					<!-- <swiper-item class="swiper">
						<scroll-view :scroll-y="tabTop" class="item" @scrolltolower='scrolltolower' show-scrollbar>
							<view>
								<car :carlist='carlist[1]'></car>
							</view>
							<u-loadmore :status="loadStatus[1]" @loadmore="clickLoadMore" v-show="!defaultImg"
								margin-top="50" />
							<defaultImg :show='defaultImg'></defaultImg>
						</scroll-view>
					</swiper-item>

					<swiper-item class="swiper">
						<scroll-view :scroll-y="tabTop" class="item" @scrolltolower='scrolltolower' show-scrollbar>
							<view>
								<car :carlist='carlist[2]'></car>
							</view>
							<u-loadmore :status="loadStatus[2]" @loadmore="clickLoadMore" v-show="!defaultImg"
								margin-top="50" />
							<defaultImg :show='defaultImg'></defaultImg>
						</scroll-view>
					</swiper-item>

					<swiper-item class="swiper">
						<scroll-view :scroll-y="tabTop" class="item" @scrolltolower='scrolltolower' show-scrollbar>

							<view>
								<car :carlist='carlist[3]'></car>
							</view>
							<u-loadmore :status="loadStatus[3]" @loadmore="clickLoadMore" v-show="!defaultImg"
								margin-top="50" />
							<defaultImg :show='defaultImg'></defaultImg>
						</scroll-view>
					</swiper-item> -->
				</swiper>
			</view>

		</view>
	</view>
</template>

<script src="./buyCar.js"></script>

<style lang="scss" scoped>
	@import './buyCar.scss';

	/deep/.u-sticky {
		left: 0 !important;
	}

	.down-open {
		& /deep/ .u-dropdown__content {
			height: 100vh !important;
		}
	}

	.down-close {
		& /deep/ .u-dropdown__content {
			height: 0 !important;
		}
	}

	/deep/.u-scroll-box {
		border-bottom: 2rpx solid #F7F7F7;
	}

	/deep/.u-iconfont {
		font-size: 20rpx !important;
		// color: #666666!important;
	}

	/deep/.u-tab-bar {
		background: linear-gradient(0deg, #FBB000, #FFE23E) !important;
	}
</style>
